import { Canvas, Story, Meta } from "@storybook/blocks";
import { MultiAutocomplete, Stack } from "metabase/ui";
import * as MultiAutocompleteStories from "./MultiAutocomplete.stories";

<Meta of={MultiAutocompleteStories} />

# MultiAutocomplete

Our themed wrapper around [Mantine MultiSelect](https://v6.mantine.dev/core/multi-select/) with autocomplete features.

## Docs

- [Figma File](https://www.figma.com/file/21uCY0czmCfb6QBjRce0I8/Input-%2F-MultiSelect?type=design&node-id=1-96&mode=design&t=Mk8RP6HsneuWzHtr-0)
- [Mantine MultiSelect Docs](https://v6.mantine.dev/core/multi-select/)

## Examples

<Canvas>
  <Story of={MultiAutocompleteStories.Default} />
</Canvas>

### Size - md

<Canvas>
  <Story of={MultiAutocompleteStories.EmptyMd} />
</Canvas>

#### Asterisk

<Canvas>
  <Story of={MultiAutocompleteStories.AsteriskMd} />
</Canvas>

#### Clearable

<Canvas>
  <Story of={MultiAutocompleteStories.ClearableMd} />
</Canvas>

#### Description

<Canvas>
  <Story of={MultiAutocompleteStories.DescriptionMd} />
</Canvas>

#### Disabled

<Canvas>
  <Story of={MultiAutocompleteStories.DisabledMd} />
</Canvas>

#### Error

<Canvas>
  <Story of={MultiAutocompleteStories.ErrorMd} />
</Canvas>

#### Read only

<Canvas>
  <Story of={MultiAutocompleteStories.ReadOnlyMd} />
</Canvas>

### Size - xs

<Canvas>
  <Story of={MultiAutocompleteStories.EmptyXs} />
</Canvas>

#### Asterisk

<Canvas>
  <Story of={MultiAutocompleteStories.AsteriskXs} />
</Canvas>

#### Clearable

<Canvas>
  <Story of={MultiAutocompleteStories.ClearableXs} />
</Canvas>

#### Description

<Canvas>
  <Story of={MultiAutocompleteStories.DescriptionXs} />
</Canvas>

#### Disabled

<Canvas>
  <Story of={MultiAutocompleteStories.DisabledXs} />
</Canvas>

#### Error

<Canvas>
  <Story of={MultiAutocompleteStories.ErrorXs} />
</Canvas>

#### Read only

<Canvas>
  <Story of={MultiAutocompleteStories.ReadOnlyXs} />
</Canvas>
